<template>
  <div class="container">
    <div class="personal_title">
     <div class="title_img"><open-data type="userAvatarUrl"></open-data></div>
      <span class="title_name"><open-data type="userNickName"></open-data></span>
      <span class="title_join" @click="joinUs">加入我们 ></span>
    </div>
    <div class="top-line"></div>
    <ul class="personal_list">
      <li v-for="(value,index) in navData" @click="slect(index)">
        <span class="list_number">{{value.number}}</span>
        <span class="list_title">{{value.title}}</span>
      </li>
    </ul>
    <drawList :drawData="personalList" :activeType="active"></drawList>
    <img src="http://file.rzkeji.com/web/loveciy/img/footer.jpg" class="footer" mode="aspectFill"/>
    <footer1></footer1>
     <div class="ucenter">
          <navigator url="../personal/main">
            <img src="http://ciy.oss-cn-shenzhen.aliyuncs.com/web/cut/icon-ucenter.png" class="customer"/>
          </navigator>
    </div>
    <div class="customerWrap">
          <navigator url="../customer/main">
            <img src="http://file.rzkeji.com/web/loveciy/img/customer.png" class="customer"/>
          </navigator>
    </div>
  </div>
</template>

<script>
import footer1 from '@/components/footer'
import drawList from '@/components/drawList'
export default {
  components: {
    footer1,
    drawList
  },
  data () {
    return {
      navData:[
      {
        number:0,
        title:"抽奖"
      },
      {
        number:0,
        title:"砍价"
      },
      // {
      //   number:0,
      //   title:"中奖纪录"
      // }
      ],
      personalList:[],
      active:{
        type:"active",
        end:{
          endImg:"http://file.rzkeji.com/web/loveciy/img/luckDraw/end.png",
          endDesc:"已开奖"
        },
        start:{
          startImg:"http://file.rzkeji.com/web/loveciy/img/luckDraw/start.png",
          startDesc:"进行中"
        },
        join:{
          joinImg:"http://file.rzkeji.com/web/loveciy/img/luckDraw/start.png",
          joinDesc:"已参与"
        }
      },
      userToken:"",
      page:0,
      limit:6,
      tag:0,
      isRequest:true,
      timeInterval:""
    }
  },
  onReachBottom(){
    this.page++;
    clearInterval(this.timeInterval)
    switch(this.tag){
        case 0: this.getLuckDrawData();break;
        case 1: this.getCutPirceData();break;
        // case 2: this.getwinnerData();break;
    }
  },
  methods:{
    async getData(url,params){
      if(this.isRequest){
        let res = await this.$request.getData(url,params);
        let data=res.data.data;
        if(data.length==0){
          this.isRequest=false;
        }
        if(res.data.level=='success'){
        if(!this.page){
          this.personalList=data;
        }else{
          this.personalList=this.personalList.concat(data);
        }
        console.log(this.personalList)
        }
      }
    },
    getwinnerData(){
      let url='https://diy.zoomyoung.cn/api/activity/get-my-activity-win-Draw';
      let params={user_token:this.userToken,page:this.page,limit:this.limit}
      this.active.type='winner';
      this.getData(url,params)
    },
    getLuckDrawData(){
      let url='https://diy.zoomyoung.cn/api/activity/get-activity-draw';
      let params={user_token:this.userToken,is_my:1,page:this.page,limit:this.limit}
      this.active.type='active';
      this.getData(url,params)
    },
    getCutPirceData(){
      let url='https://diy.zoomyoung.cn/api/activity/get-my-activity-bargains';
      let params={user_token:this.userToken,page:this.page,limit:this.limit}
      this.getData(url,params)
      this.active.type='cutPrice';
      this.timeInterval=setInterval(()=>{
          this.personalList.forEach((item)=>{
            item.last_time_int--;
            if(item.last_time_int<1){
              item.last_time_int=0;
            }
          })
      },1000)

    },
    getCount(){
        var _this=this;
        let userToken=wx.getStorageSync('userToken');
        _this.$request.getData('https://diy.zoomyoung.cn/api/activity/ucenterGetCount?user_token='+userToken,"").then(res =>{
            if(res.data.level == "success") {
                _this.navData[0].number = res.data.data.draw_count;
                _this.navData[1].number = res.data.data.cut_count;
                _this.navData[2].number = res.data.data.win_count;
            }else {
              if(res.data.data == "no_login"){
                wx.navigateTo({
                  url:"/pages/login/main"
                })
              }else{
                this.$currency.showToast(res.data.message,'none',2500)
              }
            }
        })
    },
    slect(index){
      this.page=0;
      this.isRequest=true;
      this.tag=index;
      clearInterval(this.timeInterval)
       switch(this.tag){
        case 0: this.getLuckDrawData();break;
        case 1: this.getCutPirceData();break;
        case 2: this.getwinnerData();break;
       }
    },
    joinUs(){
      wx.switchTab({
          url:'../contact/main'
        })
    }
  },
  onShow(){
    this.getCount();
    this.slect(this.tag)
  },
  mounted () {
    this.userToken=wx.getStorageSync('userToken')
    this.getLuckDrawData();
  },
  destroyed(){
    clearInterval(this.timeInterval)
  },
  onHide(){
    clearInterval(this.timeInterval)
  }
}
</script>

<style scoped>
.container{width: 100%;padding-bottom: 55px;}
.personal_title{width: 100%;height:40px;position: relative;display: flex;justify-content: row;padding-top: 20.5px;}
.title_img{width: 40px;height: 40px;margin-left: 11.5px;display: block;}
.title_name{height: 40px;line-height: 40px;font-size: 13px;margin-left: 14px;display: block;}
.title_join{width: 80px;height: 40px;line-height: 40px;text-align: center;position: absolute;right: 0px;top: 20.5px;font-size: 14px;color: #999999;}
.personal_list{width: 100%;height:44px;display: flex;justify-content: row;margin-top: 15px;}
.personal_list li{width: 50%;height: 70%;float: left;display:flex;flex-direction: column;border-right:0.5px solid #999999;}
.personal_list li:nth-last-of-type(1){border-right:0;}
.list_number{width: 100%;height: 20px;line-height: 20px;text-align: center;font-size: 19px;}
.list_title{width: 100%;height: 20px;line-height: 15px;text-align: center;font-size: 13px;}
.footer{width: 100%;display: block;height: 36px;}
.ucenter{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 120px;background: rgba(0,0,0,0.5);border-radius: 50px;}
.customerWrap{width: 50px;height: 50px;position: fixed;right: 20px;bottom: 65px;background: rgba(0,0,0,0.5);border-radius: 50px;}
.customer{width:40px;height:40px;margin-left:5px;margin-top:5px;}
.top-line{border-bottom:1rpx solid #cccccc;margin-top: 10px}
</style>
